<template>
<div>
  <!-- 面包屑 -->
  <el-breadcrumb class="navigation">
    <el-breadcrumb-item :to="{ path: '/mapu' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>门牌补发</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 主体区域 -->
  <!-- 门牌补发 -->
  <el-card class="notice">
    <h4>&nbsp;&nbsp;门牌补发</h4>
    <el-form :model="reissue" ref="reissue" :rules="rules" class="open" label-width="auto">
      <el-form-item label="门牌号：" prop="number">
        <el-input v-model="reissue.number" clearable style="width: 52%" placeholder="请输入想要补发的门牌号"></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" prop="telephone">
        <el-input v-model="reissue.telephone" clearable style="width: 52%" placeholder="请输入您的联系电话"></el-input>
      </el-form-item>
      <el-form-item label=" 申请理由:" prop="reason" style="width: 82%">
        <quill-editor v-model="reissue.reason" ref="myQuillEditor" :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
          </quill-editor>
      </el-form-item>
      <el-form-item style="width: 52%">
        <el-button type="primary" icon="el-icon-edit" @click="submitForm('reissue')">提交申报</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import ImageResize from 'quill-image-resize-module'
import { addQuillTitle } from '../../assets/Js/quill-title'
// eslint-disable-next-line no-undef
Quill.register('modules/imageResize', ImageResize)
export default {
  name: 'Reissue',
  components: {
    quillEditor
  },
  data () {
    // 电话号码校验
    var validatePass3 = (rule, value, callback) => {
      if (value && (!(/^[1][345789]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
        callback(new Error('手机号码不符合规范'))
      } else {
        callback()
      }
    }
    return {
      reissue: {
        number: '',
        telephone: '',
        reason: ''
      },
      rules: {
        number: [
          { required: true, message: '请输入需要补发的门牌号', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: validatePass3, trigger: 'blur' }
        ]
      },
      editorOption: {
        placeholder: '请输入申请理由',
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            // eslint-disable-next-line standard/object-curly-even-spacing
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            // eslint-disable-next-line standard/object-curly-even-spacing
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            // eslint-disable-next-line standard/object-curly-even-spacing
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image', 'video'] // 上传图片、上传视频
          ],
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      }
    }
  },
  watch: {
    value: function () {
      this.reissue.reason = this.value
    }
  },
  mounted () {
    addQuillTitle()
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    // 提交申请
    submitForm (reissue) {
      this.$refs[reissue].validate((valid) => {
        if (valid) {
          let param = {
            oldHouseid: this.reissue.number,
            applyTele: this.reissue.telephone,
            applyReason: this.reissue.reason
          }
          this.$axios({
            url: 'pogapply-record/reissue',
            method: 'post',
            data: param
          }).then(res => {
            console.log(res.data)
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.$refs[reissue].resetFields()
            } else {
              this.$message.error(res.data.message)
            }
          })
            .catch((err) => {
              console.log(err)
            })
        }
      })
    },
    onEditorReady (editor) { // 准备编辑器
    },
    onEditorBlur () { }, // 失去焦点事件
    onEditorFocus () { }, // 获得焦点事件
    onEditorChange () {
      this.$emit('input', this.reissue.reason)
    } // 内容改变事件
  }
}
</script>

<style scoped>
.navigation {
  padding: 10px;
}
.notice {
  margin-bottom: 40px;
  border-radius: 15px;
  box-shadow: 15px 15px 10px -12px #4c61a0;
}
h4 {
  padding-bottom: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid #4c61a0;
}
.open {
  margin-left: 13%;
  margin-top: 30px;
}
</style>
